<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>编辑商品规格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<style>
    .layui-input, .layui-textarea {
        display: inline;
        width: 100%;
        padding-left: 10px;
    }
    .unit{
        margin-left: 8px;
    }
    .layui-btn {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        margin-left: 100px;
        /*margin-top: 10px;*/
        margin-bottom: 10px;
    }
    .imgs-group{
        float: left;
        width: 100px;
        margin-right: 5px;
    }
    .imggroup{
        border: 1px solid #E0E0E0;
    }
</style>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">商品ID</label>
        <div class="layui-input-inline">
            <input type="text" id="productId" name="productId" placeholder="商品ID" autocomplete="off" readonly="readonly"  class="layui-input" th:if="${product!=null}" th:value="${product.productId}" >
            <!--<input type="hidden" id="priceId" name="priceId"  readonly="readonly"  class="layui-input" th:if="${guigePrice!=null}" th:value="${guigePrice.priceId}" >-->
            <!--<label id="noshow" style="color:red;" class="layui-form-mid"></label>-->
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" id="productName" name="productName" th:if="${product!=null}" th:value="${product.productName}"  placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品图片</label>
        <!--<div class="layui-input-inline">-->
        <!--&lt;!&ndash;<input type="text" id="imgurl" name="imgurl" value="充值" placeholder="请输入备注" autocomplete="off" class="layui-input">&ndash;&gt;-->
        <!--<img th:if="${guigePrice!=null}" th:src="@{${guigePrice.imgurl}}" th:width="80" th:height="80"/>-->
        <!--</div>-->
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" th:if="${product!=null}" th:src="@{${product.proImg}}" th:width="80" th:height="80">
            <p id="demoText"></p>
        </div>
    </div>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上品类别</label>
        <div class="layui-input-inline">
            <input type="text" id="classId" name="classId" th:if="${product!=null}" th:value="${product.classId}" placeholder="0.00" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品单位</label>
        <div class="layui-input-inline">
            <input type="text" id="productUnit" name="productUnit" th:if="${product!=null}" th:value="${product.productUnit}"  placeholder="单位" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动专区</label>
        <div class="layui-input-inline">
            <input type="text" id="activeSign" name="activeSign" th:if="${product!=null}" th:value="${product.activeSign}"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上架状态</label>
        <div class="layui-input-inline">
            <input type="text" id="productUpState" name="productUpState" th:if="${product!=null}" th:value="${(product.productUpState=='Y')?'已上架':'未上架'}" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">上架时间</label>
        <div class="layui-input-inline">
            <input type="text" id="uptime" name="uptime" th:if="${product!=null}" th:value="${product.uptime}"  autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">供货商</label>
        <div class="layui-input-inline">
            <input type="text" id="supplier" name="supplier" th:if="${product!=null}" th:value="${product.supplier}" placeholder="0.00" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称简称</label>
        <div class="layui-input-inline">
            <input type="text" id="productshortname" name="productshortname" th:if="${product!=null}" th:value="${product.productshortname}" placeholder="0.00" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品详情</label>
        <div class="layui-input-inline">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo2" th:if="${product!=null}" th:src="@{${product.detailContent}}" th:width="80" th:height="80">
                <p id="text-details"></p>
            </div>
        </div>
    </div>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="details">上传图片</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-inline">
            <input type="text" id="productDesc" name="productDesc" th:if="${product!=null}" th:value="${product.productDesc}" placeholder="0.00" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品排序</label>
        <div class="layui-input-inline">
            <input type="text" id="sort" name="sort" th:if="${product!=null}" th:value="${product.sort}" placeholder="输入0~99999999升序排列" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script>
    $(function () {
        var activeSign=$('#activeSign').val();
        var ac=parseInt(activeSign);
        switch (ac) {
            case 3:$('#activeSign').val("体验专区");break;
            case 4:$('#activeSign').val("零售专区");break;
            case 5:$('#activeSign').val("兑换专区");break;
            case 7:$('#activeSign').val("活动专区");break;
        }
    })
</script>
<script>
    var productId=$('#productId').val();
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/upProImg?productId='+productId
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.msg=='1'){
                    layer.alert("上传成功！");
                }

            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //上传详情图
        upload.render({
            elem: '#details'
            ,url: '/uploadProDetailImg?productId='+productId
            // ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //上传完毕
                if(res.msg=='1'){
                    layer.alert('上传成功！');
                }else{
                    layer.alert('上传失败！');
                }
            }
        });

        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            ,url: '/upload/'
            ,auto: false
            //,multiple: true
            ,bindAction: '#test9'
            ,done: function(res){
                console.log(res)
            }
        });


    });
</script>

</body>
</html>